<template>
  <div ref="myEchart" class="container"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      isShow: true,
    };
  },
  name: "news",
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var myechart = echarts.init(this.$refs.myEchart); // 获取元素
      let data = [
        {
          value: 23000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#f2a063" },
              { offset: 1, color: "rgba(242, 160, 99, 0.2)" },
            ]),
          },
        },
        {
          value: 25000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#a5e15e" },
              { offset: 1, color: "rgba(166, 226, 95, 0.2)" },
            ]),
          },
        },
        {
          value: 15000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#eb677f" },
              { offset: 1, color: "rgba(235, 103, 127, 0.2)" },
            ]),
          },
        },
        {
          value: 6000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#f08677" },
              { offset: 1, color: "rgba(239, 137, 120, 0.2)" },
            ]),
          },
        },
        {
          value: 12000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#51d798" },
              { offset: 1, color: "rgba(84, 215, 153, 0.2)" },
            ]),
          },
        },
        {
          value: 20000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#526feb" },
              { offset: 1, color: "rgba(85, 112, 236, 0.2)" },
            ]),
          },
        },
        {
          value: 15000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#4dd89c" },
              { offset: 1, color: "rgba(77, 214, 157, 0.2)" },
            ]),
          },
        },
        {
          value: 29000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#87d2fe" },
              { offset: 1, color: "rgba(136, 210, 255, 0.2)" },
            ]),
          },
        },
        {
          value: 24000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#ca84fe" },
              { offset: 1, color: "rgba(201, 131, 254, 0.2)" },
            ]),
          },
        },
        {
          value: 14000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#88d4ff" },
              { offset: 1, color: "rgba(137, 212, 254, 0.2)" },
            ]),
          },
        },
      ];
      myechart.setOption({
        title: {
          text: "上月同期订单数据",
          left: "center",
          top: "2%",
          textStyle: {
            color: "#333333",
            fontSize: 16,
          },
        },
        xAxis: {
          name: "日期",
          nameTextStyle: {
            fontWeight: "bold",
            verticalAlign: "top",
            lineHeight: 28,
          },
          type: "category",
          data: [
            "05-25",
            "05-26",
            "05-27",
            "05-28",
            "05-29",
            "05-30",
            "05-31",
            "06-01",
            "06-02",
            "06-03",
          ],
          axisLabel: {
            inside: false,
            color: "#333333",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          //   data: [0, 6000, 12000, 18000, 24000, 30000],
          offset: -10,

          name: "(元)",
          nameTextStyle: {
            align: "right",
            fontWeight: "bold",
            padding: [0, 46, 0, 0],
          },
          nameGap: -6,

          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#d7f3b8" },
                  { offset: 0.7, color: "#d7f3b8" },
                  { offset: 1, color: "#d7f3b8" },
                ]),
              },
            },
            barWidth: 15,
            data: data,
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 400px !important;
  margin-bottom: 20px;
  margin-top: -20px;
  background-color: transparent !important;
}
</style>